import React from 'react';
import {Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button} from 'antd';
import axios from '../../components/Engineering/axios'

const {Option, OptGroup} = Select;
const {Item: FormItem} = Form;


class RadioFrom extends React.Component {
  state = {
    linkageChecked: true,
    linkageDisabled: false,

    defaultCheckedList: ['Apple', 'Orange'],
    indeterminate: true,
    checkAll: false,
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        apple: !this.state.apple
      })
    }, 1000)
  }

  render() {
    const {getFieldDecorator} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},

      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    }
    return (
      <>
        <Card title="radio 单选框" style={{marginTop: 10}}>
          <Form layout="horizontal" labelAlign="left">

            <FormItem label="1.最简单的用法">
              <Radio>Radio0</Radio>
              <Radio autoFocus={true}>Radio1</Radio>
              <Radio>Radio2</Radio>
            </FormItem>


            <FormItem label="2.Radio 不可用">
              <Radio defaultChecked disabled>
                Disabled
              </Radio>
            </FormItem>

            <FormItem layout="horizontal" labelAlign="left" label="3.一组互斥的 Radio 配合使用">
              <Radio.Group onChange={e => this.setState({value: e.target.value})} value={this.state.value}>
                <Radio value={10}>A</Radio>
                <Radio value={20}>B</Radio>
                <Radio value={30}>C</Radio>
                <Radio value={40}>D</Radio>
              </Radio.Group>
            </FormItem>


            <FormItem layout="horizontal" labelAlign="left" label="4.Radio.Group 组合 - 配置方式">
              <Radio.Group options={[
                {label: 'Apple', value: 'Apple'},
                {label: 'Pear', value: 'Pear'},
                {label: 'Orange', value: 'Orange'},
              ]} onChange={e => this.setState({
                value: e.target.value,
              })} value={this.state.value}/>
            </FormItem>

            <FormItem layout="horizontal" labelAlign="left" label="5.按钮样式">
              <Radio.Group defaultValue="a" size="large" buttonStyle="solid">
                <Radio.Button value="a">Hangzhou</Radio.Button>
                <Radio.Button value="b">Shanghai</Radio.Button>
                <Radio.Button value="c">Beijing</Radio.Button>
                <Radio.Button value="d">Chengdu</Radio.Button>
              </Radio.Group>
            </FormItem>

          </Form>
        </Card>

      </>
    )

  }
}

export default Form.create({name: 'RadioFrom'})(RadioFrom)

// API
// Radio
// autoFocus	       自动获取焦点	boolean	false
// checked	         指定当前是否选中	boolean	false
// defaultChecked	   初始是否选中	boolean	false
// value	           根据 value 进行比较，判断是否选中	any	-


// RadioGroup
// defaultValue	           默认选中的值	any	-
// disabled	               禁选所有子单选器	boolean	false	3.6.5
// name	RadioGroup         下所有 input[type="radio"] 的 name 属性	string	-
// options	               以配置形式设置子元素	string[] | Array<{ label: string value: string disabled?: boolean }>	-
// size	                   大小，只对按钮样式生效	large | default | small	default
// value	                 用于设置当前选中的值	any	-
// onChange	               选项变化时的回调函数	Function(e:Event)	-
// buttonStyle	           RadioButton 的风格样式，目前有描边和填色两种风格	outline | solid	  outline	3.7.0

// 方法
// Radio
// blur()	移除焦点
// focus()	获取焦点
